<template>
  <div class="center-container" :style="mapMarginStyle">
    <Map
      :ref="mapComponentRef"
      :showMapType="4"
      :mapMode="2"
      :mapCameraZoom="mapCameraZoomConfig"
      :isShowBasemapSelectWidget="mapBasemapSelectWidgetShowFlag"
      :isShowBoundsSwitchWidget="mapBoundsSwitchWidgetShowFlag"
      :isShowToolsBar="mapToolsBarShowFlag"
      :isShowLocationBar="mapLocationBarShowFlag"
      :isShowRestoreInitialStatusWidget="mapRestoreInitialStatusWidgetShowFlag"
      :defaultShowBoundsLevel="mapDefaultShowBoundsLevel"
      :defaultLevelWithSwitchMapStatus="frontClusterStartLevel"
      @loaded="getMap"
    >
      <template v-slot:bottomLeft>
        <POILayerManagement :layerGroup="bindingLayerGroups" @change="POILayerChangeHandle" />
      </template>
    </Map>
  </div>
</template>

<script>
import { mapCommonMixin } from '@/mixins/mapCommonMixin'
import { centerModuleWithMapMixin } from '@/mixins/centerModuleWithMapMixin'

export default {
  name: 'centerModule',
  mixins: [mapCommonMixin, centerModuleWithMapMixin]
}
</script>

<style lang="scss" scoped>
.center-container {
  width: calc(100% - var(--marginRight) - var(--marginLeft));
  height: calc(100% - var(--marginTop) - var(--marginBottom));
  position: absolute;
  top: var(--marginTop);
  right: var(--marginRight);
  bottom: var(--marginBottom);
  left: var(--marginLeft);
  z-index: 1;
}
</style>
